<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>07.layui徽章</title>
        <link rel="stylesheet" href="static/layui-2.5.6/css/layui.css">
    </head>
    <body>
        <div class="layui-container">
            <!-- 徽章：layui-badge,  基本的, 小椭圆 -->
            <!-- 徽章：layui-badge-dot, 小圆点, 不能写内容 -->
            <!-- 徽章：layui-badge-rim, 小方框, 可以写内容 -->
            <div class="row layui-col-lg10 layui-col-lg-offset1">
                <div>
                    <button class="layui-btn layui-bg-red layui-btn-fluid">
                        小圆点，通过 layui-badge-dot 来定义，里面不能加文字
                    </button>
                </div>
                <span class="layui-badge-dot"></span>
                <span class="layui-badge-dot layui-bg-orange"></span>
                <span class="layui-badge-dot layui-bg-green"></span>
                <span class="layui-badge-dot layui-bg-cyan"></span>
                <span class="layui-badge-dot layui-bg-blue"></span>
                <span class="layui-badge-dot layui-bg-black"></span>
                <span class="layui-badge-dot layui-bg-gray"></span>
            </div>
            <hr/>
            <br/>
            <br/>
            <br/>

            <div class="row layui-col-lg10 layui-col-lg-offset1">
                <div>
                    <button class="layui-btn layui-btn-fluid">
                        椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
                    </button>
                </div>
                <span class="layui-badge">6</span>
                <span class="layui-badge">99</span>
                <span class="layui-badge">61728</span>
                <span class="layui-badge">赤</span>
                <span class="layui-badge layui-bg-orange">橙</span>
                <span class="layui-badge layui-bg-green">绿</span>
                <span class="layui-badge layui-bg-cyan">青</span>
                <span class="layui-badge layui-bg-blue">蓝</span>
                <span class="layui-badge layui-bg-black">黑</span>
                <span class="layui-badge layui-bg-gray">灰</span>
            </div>
            <hr/>
            <br/>
            <br/>
            <br/>


            <div class="row layui-col-lg10 layui-col-lg-offset1">
                <div>
                    <button class="layui-btn layui-btn-fluid layui-bg-black">
                        边框体，通过 layui-badge-rim 来定义
                    </button>
                </div>
                <span class="layui-badge-rim">6</span>
                <span class="layui-badge-rim">Hot</span>
            </div>
            <hr/>
            <br/>
            <br/>
            <br/>
        </div>


        <script src="static/layui-2.5.6/layui.js"></script>
        <script>
            // element是导航, 选项卡需要的组件
            layui.use(['layer', 'form', 'element'], function () {
                var layer = layui.layer,
                    form = layui.form,
                    element = layui.element;
            });
        </script>
    </body>
</html>
